<template>
	<!-- 巡检服务  巡检详情 已完成 缺少切换 -->
	<view class="flex-col page">
		<view class="back-w" style="position: fixed;z-index: 9; height: 100rpx; background: #deefff;">
			<view class="u-m-l-10" @click="Back()">
				<u-icon name="arrow-left" color="#000000" size="20"></u-icon>
			</view>
			<view class="f-w-l">巡检服务</view>
		</view>
		<view class="flex-col section_1">
			<view class="flex-col section_2">
				<!-- 头部 -->
				<view class="justify-between group_4">
					<view class="flex-row flex-center">
						<image :src="infodata.address" class="image_5" />
						<text class="text_1">{{infodata.consumerName}}</text>
					</view>
					<image :src="$IMG_URL+'16557870729613860538.png'" class="image_6" @click="toaddXQ" />
				</view>
				<view class="flex-col items-start group_6">
					<text class="text_2">巡检服务订单</text>
					<text class="text_3">第{{infodata.conductNum}}次巡检（{{infodata.processName}}）</text>
				</view>
				<text
					class="text_4">{{infodata.provinceName}}{{infodata.cityName}}{{infodata.districtName}}{{this.infodata.position}}</text>
				<view class="flex-row group_7">
					<text class="text_5">上门巡检时间：{{infodata.inspectionDate}}</text>
				</view>
			</view>
		</view>
		<view class="flex-col group_8">
			<view class="justify-between group_9">
				<view class="flex-col"><text class="text_7" :class="this.PatrolTab==0?'PatrolActive':'PatrolActives'"
						@click="PatrolClick(0)">巡检问题</text></view>
				<view class="flex-col text-wrapper_1" v-if="this.PatrolTab == 1"><text class="text_8"
						:class="this.PatrolTab==1?'PatrolActive':'PatrolActives'" @click="PatrolClick(1)">进度更新</text>
				</view>
				<view class="flex-col text-wrapper_1" v-else><text class="text_8"
						:class="this.PatrolTab==1?'PatrolActive':'PatrolActives'" @click="PatrolClick(1)">巡检进度</text>
				</view>
				<view class="flex-col text-wrapper_2"><text class="text_9"
						:class="this.PatrolTab==2?'PatrolActive':'PatrolActives'" @click="PatrolClick(2)">形象视频</text>
				</view>
				<view class="flex-col text-wrapper_3"><text class="text_10"
						:class="this.PatrolTab==3?'PatrolActive':'PatrolActives'" @click="PatrolClick(3)">项目详情</text>
				</view>
			</view>

			<view v-if="this.PatrolTab==0">
				<image :src="$IMG_URL+'16557870729685527062.png'" class="image_7" />
			</view>
			<view v-else-if="this.PatrolTab==1">
				<image :src="$IMG_URL+'16557870729685527062.png'" class="image_71" />
			</view>
			<view v-else-if="this.PatrolTab==2">
				<image :src="$IMG_URL+'16557870729685527062.png'" class="image_72" />
			</view>
			<view v-else-if="this.PatrolTab==3">
				<image :src="$IMG_URL+'16557870729685527062.png'" class="image_73" />
			</view>
			<!--  -->
			<view v-if="this.PatrolTab==0">
				<view v-if="tabProState == 0 ">
					<view class="justify-between section_3">
						<view class="group_10">
							<text class="text_11">{{infodata.detailedName}}</text>
							<text class="text_12">（{{infodata.conductNum}}/{{infodata.inspectionNums}}次）</text>
						</view>
						<text class="text_13" @click="toPatroSerD">查看往期巡检</text>
					</view>
					<view class="flex-row group_11">
						<view class="flex-col items-center text-wrapper_4"
							:class="PatrolState ==0?'PatrolStateActive':''"><text class="text_14"
								@click="patrolPro(0)">全部</text></view>
						<view class="flex-col items-center text-wrapper_5"
							:class="PatrolState ==1?'PatrolStateActive':''"><text class="text_15"
								@click="patrolPro(1)">待整改</text></view>
						<view class="flex-col items-center text-wrapper_5"
							:class="PatrolState ==2?'PatrolStateActive':''"><text class="text_15"
								@click="patrolPro(2)">待确认</text></view>
						<view class="flex-col items-center text-wrapper_5"
							:class="PatrolState ==3?'PatrolStateActive':''"><text class="text_15"
								@click="patrolPro(3)">已整改</text></view>
					</view>
					<view v-if="PatrolList != ''" class="patrollist">
						<view class="flex-col section_4" v-for="(demo, i) in PatrolList" :key="i">
							<view class="flex-col">
								<view class="flex-col list-item"
									:class="demo.isUserReplyStatus == 0?'list-itemLine':demo.isUserReplyStatus == 2?'list-itemLine':''">
									<view class="justify-between">
										<view class="flex-row group_14 view_3">
											<text class="text_19">{{demo.issueUserName}}</text>
											<view class="flex-col text-wrapper_6">
												<text class="text_20" v-if="demo.issueUserRoleName  == 105">巡检员</text>
												<text class="text_20"
													v-else-if='demo.issueUserRoleName  == 104'>工长</text>
											</view>
										</view>
										<!--  -->
										<text class="text_21" v-if="demo.rectificationStatus == 2">待确认</text>
										<text class="text_51" v-else-if="demo.rectificationStatus == 3">已解决</text>
										<text class="text_55" v-else-if="demo.rectificationStatus == 5">用户已拒绝</text>
										<text class="text_55" v-else-if="demo.rectificationStatus == 1">待解决</text>
										<text class="text_51" v-else-if="demo.isContinueReply == 1 ">继续整改中</text>
										<text class="text_55" v-else-if="demo.rectificationStatus == 4">待用户解决</text>
									</view>
									<text class="text_23">问题类型：{{demo.issueTypeName}}</text>
									<view class="flex-row equal-division ">
										<view v-if="demo.issueMedias" class='imagegrid'>
											<view v-for="(item,j) in demo.issueMedias" :key="j">
												<view class="media" v-if="/\.(svg|jpe?g|png|gif|webp)$/.test(item)">
													<image :src="item" class="equal-division-item"
														@click.stop="prviewImage(demo.issueMedias,j)" />
												</view>
												<view v-else class="videoview media" @click="goVideo(item)">
													<image class="equal-division-item"
														:src="item+'?x-oss-process=video/snapshot,t_1000,m_fast'">
													</image>
													<image :src="$IMG_URL+'16557867901398396466.png'" class="play" />
												</view>
											</view>
										</view>
									</view>
									<text class="text_25">{{demo.issueContent}}</text>
									<view class="flex-row group_16">
										<text class="text_26">{{demo.insertTime }}</text>
									</view>
								</view>
							</view>

							<!--  -->
							<view v-if="demo.comments!=null">
								<view v-for="(text,j) in demo.comments">
									<view class="flex-col" style="border-top: 1px solid #eee;">
										<view class="flex-col list-item"
											:class="text.isUserReplyStatus == 0?'list-itemLine':text.isUserReplyStatus == 2?'list-itemLine':''">
											<view class="justify-between">
												<view class="flex-row group_14 view_3">
													<text class="text_19">{{text.userName}}</text>
													<view class="flex-col text-wrapper_6">
														<text class="text_20"
															v-if="text.userRoleName  == 105">巡检员</text>
														<text class="text_20"
															v-else-if='text.userRoleName  == 104'>工长</text>
													</view>
												</view>
											</view>
											
											
											<view class="flex-row equal-division">

												<view v-if="text.responseImgs" class='imagegrid'>
													<view v-for="(aa,k) in text.responseImgs" :key="k">
                                                      <image :src="aa" class="equal-division-item" @click.stop="prviewImage(text.responseImgs,j)"/>

													</view>
												</view>
											</view>
											<text class="text_25">{{text.responseContent}}</text>
											<view class="flex-row group_16">
												<text class="text_26">{{text.responseTime }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="justify-end group_28" v-if="demo.rectificationStatus == 2">
								<view class="flex-col items-center text-wrapper_7 view_6" @click="jxzg(i)"><text
										class="text_32">继续整改</text></view>
								<view class="flex-col items-center text-wrapper_7" @click="RectificationED(demo)"><text
										class="text_32">解决</text></view>
							</view>
							<view class="justify-end group_28" v-if="demo.rectificationStatus == 5">
								<view class="flex-col items-center text-wrapper_9" @click="delet(demo)"><text
										class="text_60">删除</text></view>
								<view class="flex-col items-center text-wrapper_7" @click="jxzg(i)"><text
										class="text_32">回复</text>
								</view>
							</view>
						</view>
					</view>
					<view class="" v-if="this.PatrolList==''">
						<u-empty style="height: 30vh;" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
					</view>
					<view class="bottom" v-if="mytaskState != 1 ">

						<view class="nextbtn" @click="nextTab">
							<button>下一步</button>
						</view>
					</view>

				</view>
				
				<!-- 巡检详情 巡检问题 -->
				<view class="" v-if="this.tabProState == 1">
					<PatrolProblems @getState='getState' :ordersId='this.ordersId'></PatrolProblems>
				</view>
				<!-- 巡检详情 下次预计巡检时间 -->
				<view v-else-if="this.tabProState == 2">
					<patrolTime @getStateS='getStateS'></patrolTime>
				</view>
				<!-- 提交后的显示 -->
				<view  style="padding-bottom: 90rpx;" v-else-if='this.tabProState == 3'>
					<view class="flex-col section_4" v-for="(demo, i) in PatrolList" :key="i">
						<view class="flex-col">
							<view class="flex-col list-item"
								:class="demo.state == 0?'list-itemLine':demo.rectificationStatus == 2?'list-itemLine':''">
								<view class="justify-between">
									<view class="flex-row group_14 view_3">
										<text class="text_19">{{demo.issueUserName}}</text>
										<view class="flex-col text-wrapper_6">
											<text class="text_20" v-if="demo.issueUserRoleName == 105">巡检员</text>
											<text class="text_20" v-else-if="demo.issueUserRoleName ==104">工长</text>
										</view>
									</view>
									<text class="text_21" v-if="demo.rectificationStatus == 2">待确认</text>
									<text class="text_51" v-else-if="demo.rectificationStatus == 3">已解决</text>
									<text class="text_55" v-else-if="demo.rectificationStatus == 5">用户已拒绝</text>
									<text class="text_55" v-else-if="demo.rectificationStatus == 1">待解决</text>
									<text class="text_51" v-else-if="demo.isContinueReply == 1 ">继续整改中</text>
									<text class="text_55" v-else-if="demo.rectificationStatus == 4">待用户解决</text>
								</view>
								<text class="text_23">问题类型：{{demo.issueTypeName}}</text>
								<view class="flex-row equal-division">
									<view v-if="demo.issueMedias" class='imagegrid'>
										<view v-for="(item,j) in demo.issueMedias" :key="j">
											<view v-if="/\.(svg|jpe?g|png|gif|webp)$/.test(item)">
												<image :src="item" class="equal-division-item"
													@click.stop="prviewImage(demo.issueMedias,j)" />
											</view>
											<view v-else class="videoview" @click="goVideo(item)">
												<image class="equal-division-item"
													:src="item+'?x-oss-process=video/snapshot,t_1000,m_fast'"></image>
												<image :src="$IMG_URL+'16557867901398396466.png'" class="play" />
											</view>
										</view>
									</view>
								</view>
								<text class="text_25">{{demo.issueContent}}</text>
								<view class="flex-row group_16">
									<text class="text_26">{{demo.insertTime}}</text>
								</view>
								<text class="text_59" v-if="demo.state == 2">*拒绝原因：{{demo.rejection}}。</text>
							</view>
						</view>
						<view class="justify-end group_28" v-if="demo.isUserReplyStatus == 2">
							<view class="flex-col items-center text-wrapper_7 view_6" @click="jxzg(i)"><text
									class="text_32">继续整改</text></view>
							<view class="flex-col items-center text-wrapper_7" @click="RectificationED(demo)"><text
									class="text_32">解决</text></view>
						</view>
						<view class="justify-end group_28" v-if="demo.isUserReplyStatus == 5">
							<view class="flex-col items-center text-wrapper_9" @click="delet(demo)"><text
									class="text_60">删除</text></view>
							<view class="flex-col items-center text-wrapper_7" @click="jxzg(i)"><text
									class="text_32">回复</text>
							</view>
						</view>
						<!--  -->
						<view v-if="demo.comments!=null">
							<view v-for="(text,j) in demo.comments">
								<view class="flex-col" style="border-top: 1px solid #eee;">
									<view class="flex-col list-item"
										:class="text.isUserReplyStatus == 0?'list-itemLine':text.isUserReplyStatus == 2?'list-itemLine':''">
										<view class="justify-between">
											<view class="flex-row group_14 view_3">
												<text class="text_19">{{text.userName}}</text>
												<view class="flex-col text-wrapper_6">
													<text class="text_20" v-if="text.userRoleName  == 105">巡检员</text>
													<text class="text_20"
														v-else-if='text.userRoleName  == 104'>工长</text>
												</view>
											</view>
										</view>
										<view class="flex-row equal-division">
											<view v-if="text.responseImgs" class="imagegrid" style='flex-wrap:wrap'>
												<view v-for="(aa,k) in text.responseImgs" :key="k">

													
														<image :src="aa"  v-if="checkFile(aa,'image')" class="equal-division-item" @click.stop="prviewImage(text.responseImgs,j)"></image>
                                                       <view v-else class="videoview" @click="goVideo(aa)">
														<image class="equal-division-item"
															:src="aa+'?x-oss-process=video/snapshot,t_1000,m_fast'">
														</image>
														<image :src="$IMG_URL+'16557867901398396466.png'"
															class="play" />
													    </view>
												
													
													<!-- <image :src="aa" class="equal-division-item" @click.stop="prviewImage(demo.issueMedias,j)"/> -->
												</view>
											</view>
										</view>
										<text class="text_25">{{text.responseContent}}</text>
										<view class="flex-row group_16">
											<text class="text_26">{{text.responseTime }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom" v-if="mytaskState != 1 ">

						<view class="nextbtn" @click="nextTab">
							<button>下一步</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 进度更新 -->
			<view v-else-if="this.PatrolTab==1">
				<schedule></schedule>
			</view>
			<!-- 形象视频 -->
			<view v-else-if="this.PatrolTab==2">
				<IMGvivid ref="video"></IMGvivid>
			</view>
			<!-- 项目详情 -->
			<view v-else-if="this.PatrolTab==3">
				<projectDetails ref="detail" @editClick='editClick'></projectDetails>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" title="提示" content="确定解决此问题吗" message="成功消息" :duration="2000"
				:before-close="true" @close="close" @confirm="successB"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import PatrolProblems from "./PatrolProblems.vue"
	import patrolTime from './patrolTime.vue'
	import IMGvivid from './figure.vue'
	import schedule from './schedule.vue'
	import projectDetails from './projectDetails.vue'
	export default {
		components: {
			PatrolProblems,
			patrolTime,
			IMGvivid,
			schedule,
			projectDetails
		},
		data() {
			return {
				tabProState: 0,
				PatrolList: [],
				PatrolState: 0, //第二个tab切换
				PatrolTab: 0,
				inspectionFrequencyId: '',
				infodata: [],
				ordersId: '',
				num: '',
				inspectionNums: '',
				PatrolListed: [],
				imgarr: '',
				projectId: '',
				mytaskState: '-1'
			};
		},
		onLoad(option) {

			this.ordersId = option.ordersId;
			uni.setStorage({
				data: this.ordersId,
				key: 'ordersId'
			})
			this.inspectionFrequencyId = uni.getStorageSync('inspectionFrequencyId');
			this.mytaskState = option.mytaskState;
			// console.log(this.mytaskState)
		},

	
		created() {
			this.getxjwtlist();
			this.inspectionFrequencyId = uni.getStorageSync('inspectionFrequencyId');
			this.projectId = uni.getStorageSync('projectId');
			
			

		},
		methods: {
			goVideo(url) {
				uni.navigateTo({
					url: "/pages/video/video?url=" + url
				})
			},
			onPullDownRefresh() {
				this.getxjwtlist()
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			
			checkFile(fileValue,type) {
						    console.log("fileValue==" + fileValue);
						    let index = fileValue.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
						  let   fileValueSuffix = fileValue.substring(index); //截断"."之前的，得到后缀
						    if(type == 'video') {
						        if (!/(.*)\.(mp4|rmvb|avi|ts)$/.test(fileValueSuffix)) { //根据后缀，判断是否符合视频格式
						            return false;
						        }
						    }
							
						    if(type == 'image') {
						        if (!/(.*)\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileValueSuffix)) { //根据后缀，判断是否符合图片格式
						            return false;
						        }
						    }
						 
						    return true;
			},
			successB() {
				let demo = uni.getStorageSync('demo');
				this.$refs.popup.close();
				this.$http('common.deleteC', {
					issueId: demo.issueId
				}).then(res => {
					if (res.code == 200) {
						this.getxjwtlist()
					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
					}
				})
			},
			close() {
				this.$refs.popup.close()
			},
			Back() {
				// let pageNum = 2
				// let pages = getCurrentPages(); // 当前页面
				// let beforePage = pages[pages.length - pageNum];
				// uni.navigateBack({
				// 	success: function() {
				// 		// console.log(beforePage)
				// 		beforePage.$vm.$refs.onSiteIndex.getdate();
				// 	}

				// })
				uni.navigateTo({
					url: 'pages/index'
				})
			},
			jxzg(item) {
				let event = this.PatrolList[item];
				uni.navigateTo({
					url: 'pages/onSite/onSiteIndex/PatroServiceEX/PatroServiceEX?event=' + event.issueId +
						"&inspectionNumId=" + event.inspectionId
				})
			},
			toPatroSerD() {
				uni.navigateTo({
					url: '/pages/onSite/onSiteIndex/PatroSerD/PatroSerD?id=' + this.ordersId +
						'&inspectionFrequencyId=' + this.inspectionFrequencyId
				})
			},
			async getxjwtlist() {
				this.PatrolList = []
				// 巡检问题列表

				this.$http('lcheck.querylssues', {
					inspectionId: this.inspectionFrequencyId
				}).then(res => {
					if (res.code == 200) {
						this.PatrolList = res.data;
						// console.log(res.data,'res.data');
					}
				})
				//获取信息
				let ordersId = this.ordersId || uni.getStorageSync('ordersId');
				// console.log(this.ordersId,'ordersId');
				// console.log(uni.getStorageSync('ordersId'),'ordersId2')
				await this.$http('common.getInfolist', {
					ordersId: ordersId,
					type: '5',
					inspectionFrequencyId: this.inspectionFrequencyId
				}).then(res => {
					if (res.code == 200) {
						this.infodata = res.data
					}
				})
				// 判断是不是最后一次
				if (this.infodata.inspectionNums == this.infodata.conductNum) {
					this.$http('common.isNotNull', {
						inspectionId: this.inspectionFrequencyId
					}).then(res => {
						if (res.code == 200) {
							if (res.data.flag == 1) {
								this.mytaskState = 1
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: "error"
							})
						}
					})
				} else {
					this.mytaskState = 0
				}


			},

			// 接收子组件的参数
			editClick(e) {
				if (e == 'edit') {
					this.PatrolTab = 1
				}
			},
			getStateS(param) {
				let {
					tabProState,
					inspectionFrequencyId
				} = param;
				if (inspectionFrequencyId) {
					this.inspectionFrequencyId = inspectionFrequencyId;
				}

				if (tabProState == '2') {
					this.tabProState = 3;
					this.getxjwtlist();
				} else {
					this.tabProState = 1;
					this.getxjwtlist();
				}
			},
			getState(e) {
				if (e == '2') {
					this.tabProState = 2
				} else {
					this.tabProState = 0
				}
			},

			nextTab() {
				this.tabProState = 1
			},
			PatrolClick(index) {
				this.PatrolTab = index;
			},
			patrolPro(index) {
				this.PatrolState = index;

				// 巡检问题列表

				this.$http('lcheck.querylssues', {
					inspectionId: this.inspectionFrequencyId,
					rectificationStatus: index
				}).then(res => {
					if (res.code == 200) {
						this.PatrolList = res.data;

						if (res.data != '') {
							if (res.data.issueMedia.length > 1) {
								this.imgarr = res.data.issueMedia.split(',')
							} else {
								this.imgarr = res.data.issueMedia[0]
							}
						} else {
							this.imgarr = []
						}

					}
				})
			},
			toaddXQ() {
				uni.navigateTo({
					url: '/pages/foreman/projectEx/addVillage?userId=' + this.infodata.userId + '&ordersType=' +
						this.infodata.roleId
				})
			},
			// 整改完成
			RectificationED(demo) {
				uni.setStorageSync('demo', demo)
				this.$refs.popup.open()
				// console.log(demo)

			},
			// 删除
			delet(demo) {
				this.$http('common.deleteC', {
					isDel: '1',
					issueId: demo.issueId
				}).then(res => {
					if (res.code == 200) {
						this.getxjwtlist()
					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
					}
				})
			},
			prviewImage(urls, index) {
				let images = [];
				urls.map(item => {
					if (this.checkImage(item)) {
						images.push(item);
					}
				})
				uni.previewImage({
					urls: images,
					current: index
				});
			},
			checkImage(file) {
				return /\.(svg|jpe?g|png|gif|webp)$/.test(file);
			}
		},
	};
</script>

<style scoped lang="scss">
	@import url('../../../../static/style/patroService.css');

	ul li {
		list-style: none;
	}

	.xjlist ul li {
		display: flex;
		white-space: nowrap;
	}

	.imagegrid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.play {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.media {
		width: 208rpx;
		height: 208rpx;
		position: relative;

	}

	.patrollist {
		padding-bottom: 90rpx;
	}

	.bottom {
		width: 100vw;
		background: #F6F7F9;
		display: flex;
		flex-direction: column;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999999;

	}

	.back-w {
		display: flex;
		flex-direction: row;
		padding-top: 50rpx;
		width: 100vw;
		height: 90rpx;
		background-color: #ffffff;
	}

	.f-w-l {
		display: flex;
		flex-direction: row;
		font-weight: bold;
		margin-left: 33%;
		line-height: 40rpx;
	}

	.nextbtn {
		width: 686rpx;
		height: 88rpx;
		margin: 20rpx auto;
		font-size: 32rpx;
	}

	.nextbtn button {
		background-color: #1d6aff;
		outline: 0 none;
		color: #fff;
		border-radius: 44rpx;
		width: 100%;
	}

	.PatrolActive {
		font-weight: 600;
		font-size: 32rpx !important;
	}

	.PatrolActives {
		// font-weight: 600;
		font-size: 32rpx !important;
	}

	.PatrolStateActive {
		background-color: #1d6aff !important;
		display: flex;
		height: 100%;
		align-items: center;
	}

	.PatrolStateActive text {
		color: #fff;
		display: flex;
		height: 100%;
		align-items: center;
	}

	.section_5 {
		margin-top: 20rpx;
		padding: 30rpx 23rpx 34rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text-wrapper_5 {
		margin-left: 16rpx;
		flex: 1 1 160rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
		height: 64rpx;
	}

	.image_11 {
		margin-top: 28rpx;
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}

	.list-item_1 {
		padding: 30rpx 0 34rpx;
	}

	.list-item {
		padding: 30rpx 0 0rpx;
	}

	.text-wrapper_7 {
		padding: 12rpx 0;
		background-color: #1d6aff;
		border-radius: 28rpx;
		width: 148rpx;
		height: 56rpx;
	}

	.text_66 {
		margin-top: 26rpx;
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.equal-division_1 {
		margin-top: 33rpx;
	}

	.text_23 {
		margin-top: 26rpx;
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.equal-division {
		margin-top: 33rpx;
	}

	.text-wrapper_8 {
		margin-left: 15rpx;
		margin-top: 6rpx;
		flex-shrink: 0;
		padding-bottom: 8rpx;
		border-radius: 16rpx;
		background-image: url($IMG_URL+'16557867953845051439.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 32rpx;
	}

	.group_31 {
		margin-bottom: 5rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_64 {
		margin-bottom: 5rpx;
		color: #ff371d;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.equal-division-item_3 {
		// flex: 1 1 208rpx;
		border-radius: 16rpx;
		width: 160rpx;
		height: 160rpx;
	}

	.equal-division-item_4 {
		margin-left: 15rpx;
		flex: 1 1 208rpx;
		border-radius: 16rpx;
		width: 208rpx;
		height: 208rpx;
	}

	.group_14 {
		margin-bottom: 5rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_21 {
		margin-bottom: 5rpx;
		color: #ff371d;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.equal-division-item {
		flex: 1 1 208rpx;
		border-radius: 16rpx;
		width: 208rpx;
		height: 208rpx;
	}

	.equal-division-item_1 {
		margin-left: 15rpx;
		flex: 1 1 208rpx;
		border-radius: 16rpx;
		width: 208rpx;
		height: 208rpx;
	}

	.text_15 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		display: flex;
		height: 100%;
		align-items: center;
	}

	.text_43 {
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_32 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_41 {
		margin-top: 22rpx;
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_22 {
		margin-top: 36rpx;
	}

	.text_39 {
		margin-bottom: 5rpx;
		color: #ff371d;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_45 {
		margin-left: 10rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_35 {
		margin-bottom: 5rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_37 {
		margin: 0 7rpx;
		color: #1d6aff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 24rpx;
	}

	.page {
		padding-bottom: 64rpx;
		background-color: #f6f7f9ff;
		height: 100vh;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section_1 {
		padding: 7rpx 12rpx 30rpx;
		background-image: url($IMG_URL+'16557870724016329987.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: 100rpx;
	}

	.group_8 {
		margin-top: -18rpx;
		padding: 0 23rpx;
		position: relative;
	}

	.group_3 {
		margin-top: 24rpx;
		padding: 0 19.5rpx 3.5rpx;
		position: relative;
	}

	.section_2 {
		margin: 24.5rpx 9rpx 0;
		margin-top: 40rpx;
		padding: 0 43rpx 76rpx;
		background-image: url($IMG_URL+'16557870724030238158.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_9 {
		padding: 0 17rpx;
	}

	.image_7 {
		margin-left: 61rpx;
		line-height: 140rpx;
		align-self: flex-start;
		width: 40rpx;
		height: 16rpx;
	}

	.image_71 {
		margin-left: 35%;
		margin-top: 14rpx;
		align-self: flex-start;
		width: 40rpx;
		height: 16rpx;
	}

	.image_72 {
		margin-left: 60%;
		margin-top: 14rpx;
		align-self: flex-start;
		width: 40rpx;
		height: 16rpx;
	}

	.image_73 {
		margin-left: 86%;
		margin-top: 14rpx;
		align-self: flex-start;
		width: 40rpx;
		height: 16rpx;
	}

	.section_3 {
		margin-top: 23.5rpx;
		padding: 0rpx 25rpx 0rpx;
		height: 109rpx;
		background-image: url($IMG_URL+'16557870783505740940.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_11 {
		padding: 30.5rpx 7rpx 24rpx 9rpx;
	}

	.section_4 {
		padding: 0 23rpx 32rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	.section_6 {
		margin-top: 20rpx;
		padding: 30rpx 23rpx 32rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.list_1 {
		margin-top: 20rpx;
		padding-left: 24rpx;
		padding-right: 23rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.image {
		width: 33rpx;
		height: 20rpx;
	}

	.group_1 {
		margin-right: 60.5rpx;
	}

	.image_4 {
		position: absolute;
		left: 19.5rpx;
		bottom: 0;
		width: 21rpx;
		height: 36rpx;
	}

	.text {
		color: #333333;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.group_4 {
		padding: 40rpx 0 40rpx;
		border-bottom: solid 1rpx #ffffff3d;
		display: flex;
		align-items: center;
	}

	.flex-center {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.group_6 {
		margin-top: 24rpx;
	}

	.text_4 {
		margin-top: 12rpx;
		align-self: flex-start;
		color: #ffffff;
		opacity: 0.6;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_7 {
		margin-top: 12rpx;
	}

	.text-wrapper_1 {
		margin-top: 4rpx;
	}

	.text-wrapper_2 {
		margin-top: 4rpx;
	}

	.text-wrapper_3 {
		margin-top: 4rpx;
	}

	.group_10 {
		display: flex;
		height: 100%;
		align-items: center;
	}

	.text_13 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		display: flex;
		height: 100%;
		align-items: center;
	}

	.text-wrapper_4 {
		padding: 10rpx 0;
		flex: 1 1 160rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
		height: 64rpx;
	}

	.text_56 {
		margin-top: 22rpx;
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_27 {
		margin-top: 36rpx;
	}

	.text_59 {
		margin-top: 23rpx;
		align-self: flex-start;
		color: #ff371d;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.group_28 {
		margin-top: 39rpx;
		margin-bottom: 30rpx;
	}

	.list-item_1:first-of-type {
		border-bottom: solid 1rpx #eeeeee;
	}

	.image_1 {
		margin: 3.5rpx 0 2.5rpx;
		width: 85rpx;
		height: 18rpx;
	}

	.group_2 {
		margin-left: 175rpx;
	}

	.image_6 {
		align-self: center;
		width: 26rpx;
		height: 26rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: 600;
	}

	.text_3 {
		margin-top: 12rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_5 {
		color: #ffffff;
		opacity: 0.6;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_6 {
		margin-left: 14.5rpx;
		color: #ffffff;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		opacity: 0.6;
	}

	.text_7 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_8 {
		margin-left: 8rpx;
		margin-right: 7rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_9 {
		margin-left: 8rpx;
		margin-right: 7rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_10 {
		margin-left: 8rpx;
		margin-right: 7rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_11 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: 600;
	}

	.text_12 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		font-weight: 600;
	}

	.text_14 {
		color: #333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		display: flex;
		height: 100%;
		align-items: center;
	}

	.list-itemLine {
		border-bottom: solid 1rpx #eeeeee;
	}

	.view_6 {
		margin-right: 16rpx;
	}

	.text_55 {
		margin-bottom: 5rpx;
		color: #ff371d;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_51 {
		margin-bottom: 5rpx;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_57 {
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_58 {
		margin-left: 10rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text-wrapper_9 {
		margin-right: 16rpx;
		padding: 9rpx 0 19rpx;
		border-radius: 28rpx;
		border: 1px solid #FF371D;
		width: 148rpx;
		height: 56rpx;
		line-height: 40rpx;
	}

	.text_68 {
		margin-top: 22rpx;
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_33 {
		margin-top: 36rpx;
	}

	.image_2 {
		width: 14rpx;
		height: 24rpx;
	}

	.image_3 {
		margin: 3.5rpx 0 2.5rpx 15.5rpx;
		width: 55rpx;
		height: 18rpx;
	}

	.image_5 {
		flex-shrink: 0;
		border-radius: 50%;
		width: 96rpx;
		height: 96rpx;
	}

	.text_1 {
		margin-left: 32rpx;
		// margin-top: 19rpx;
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_25 {
		margin-top: 24rpx;
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_16 {
		margin-top: 24rpx;
	}

	.text_53 {
		margin-bottom: 5rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_60 {
		color: #ff371d;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.view_16 {
		margin-bottom: initial;
		color: initial;
		font-size: initial;
		font-family: initial;
		line-height: initial;
	}

	.equal-division-item_5 {
		margin-left: 15rpx;
		flex: 1 1 208rpx;
		border-radius: 16rpx;
		width: 208rpx;
		height: 208rpx;
	}

	.text_69 {
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_70 {
		margin-left: 10rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.view_3 {
		margin-bottom: initial;
		color: initial;
		font-size: initial;
		font-family: initial;
		line-height: initial;
	}

	.equal-division-item_2 {
		margin-left: 15rpx;
		flex: 1 1 208rpx;
		border-radius: 16rpx;
		width: 208rpx;
		height: 208rpx;
	}

	.text_26 {
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_27 {
		margin-left: 10rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_54 {
		margin: 0 7rpx;
		color: #1d6aff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 24rpx;
	}

	.text_62 {
		margin-bottom: 5rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text-wrapper_10 {
		margin-left: 15rpx;
		margin-top: 6rpx;
		padding-bottom: 8rpx;
		flex-shrink: 0;
		border-radius: 16rpx;
		background-image: url($IMG_URL+'16557867953845051439.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 32rpx;
	}

	.text_19 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text-wrapper_6 {
		margin-left: 15rpx;
		flex-shrink: 0;
		border: 1px solid #1d6aff;
		border-radius: 28rpx;
		height: 40rpx;
	}

	.text_63 {
		margin: 0 7rpx;
		color: #1d6aff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 24rpx;
	}

	.text_20 {
		margin: 0 10rpx;
		color: #1d6aff;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		display: flex;
		align-items: center;
		height: 100%;
	}

	.videoview {
		position: relative;


	}

	.videoview video {
		width: 208rpx;
		height: 208rpx;

		border: 1px solid #eee;
		border-radius: 36rpx;
	}
</style>
